<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>获取节点的方式</title>
</head>
<body>
    <p>大哥</p>
    <div id="box" style="width: 200px;">
        陈志攀
        <p>吃饭了</p>
        <!-- 我是注释 -->
    </div>
    <div>小弟</div>
    <script>
        console.log(box.childNodes)
        console.log(box.children)

        console.log(box.firstChild)
        console.log(box.firstElementChild)

        console.log(box.lastChild)
        console.log(box.lastElementChild)

        console.log(box.previousSibling)
        console.log(box.previousElementSibling)

        console.log(box.nextSibling)
        console.log(box.nextElementSibling)

        /*
        parentNode最外层能找到document节点
        */
        console.log(box.parentNode)
        console.log(box.parentElement)

        console.log(box.getAttribute("id"))

        console.log(box.attributes)
    </script>
</body>
</html>